<template>
<!-- 这个右侧的文本项目,如果传入值就会显示,如果不传就不会显示
这是一个独有的属性,很灵性也很方便,优秀 左侧也可以做成隐藏的
hideLeftArrow 是通过父组件传给自己的,值为true -->
<!-- left-arrow 是否显示左侧箭头,这里不使用默认箭头的原因是默认的
箭头,跟原有的设计图不一致,所以不让他显示,用左侧的插槽代替
引用的组件中,如果不传这个hide-left-arrow的值,就不会显示,传值之后
就会根据判断确定是否哦显示-->
  <van-nav-bar
    :title="title"
    :right-text="rightText"
    :left-arrow="!hideLeftArrow"
    @click-left="onClickLeft"
    @click-right="$emit('click-right')"
    class="mm-nav-bar"
  >
  <!-- 插槽的作用是定义左中右三个部分的元素的内容 #left #right #title -->
  <!-- 仔细看官方文档,插槽可以定义的有三个名字,对应左中右 -->
    <template #left>
      <i v-if="!hideLeftArrow"
      class="iconfont iconbtn_nav_back"></i>
    </template>
  </van-nav-bar>
</template>

<script>
export default {
  name: 'mm-nav-bar',
  // 给从父组件传递过来的数据都标记一下
  props: ['title', 'back', 'rightText', 'hide-left-arrow'],
  methods: {
    onClickLeft () {
      // props 里面的值如何引用,这里就有答案了,其实就是直接this.[props中的name] ,就可以引用了
      this.$router.replace(this.back)
    }
  }
}
</script>

<style lang='less'>
  .mm-nav-bar .iconfont {
    font-size: 40px;
  }
  .mm-nav-bar .van-nav-bar__text {
  color: @main-font-color;
}
</style>
